---
title: Select
description: Accessible select component built on Radix Select.
component: Select
---

<LiveComponent language="tsx">
{`
  import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@pipecat-ai/voice-ui-kit";

  <Select>
    <SelectTrigger>
      <SelectValue placeholder="Please select" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="item-1">Select Item 1</SelectItem>
      <SelectItem value="item-2">Select Item 2</SelectItem>
      <SelectItem value="item-3">Select Item 3</SelectItem>
    </SelectContent>
  </Select>
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    Select: {
      description: "Root select component (Radix Select Root)",
      type: "React.ComponentProps<typeof SelectPrimitive.Root>",
      required: false,
      default: "{}",
    },
    variant: {
      description: "Trigger visual style",
      type: '"primary" | "outline" | "ghost"',
      required: false,
      default: '"outline"',
    },
    size: {
      description: "Trigger size",
      type: '"sm" | "md" | "lg" | "xl"',
      required: false,
      default: '"md"',
    },
    align: {
      description: "Trigger text alignment",
      type: '"left" | "center" | "right"',
      required: false,
      default: '"left"',
    },
    rounded: {
      description: "Trigger border radius",
      type: '"size" | "none" | "sm" | "md" | "lg" | "xl" | "full"',
      required: false,
      default: '"size"',
    },
  }}
/>

---

## Usage

### With Guide

<LiveComponent language="tsx">
{`
  import { Select, SelectTrigger, SelectGuide, SelectValue, SelectContent, SelectItem } from "@pipecat-ai/voice-ui-kit";

  <Select>
    <SelectTrigger>
      <SelectGuide>Select</SelectGuide>
      <SelectValue placeholder="Please select" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="item-1">Select Item 1</SelectItem>
      <SelectItem value="item-2">Select Item 2</SelectItem>
      <SelectItem value="item-3">Select Item 3</SelectItem>
    </SelectContent>
  </Select>
`}
</LiveComponent>


### Alignment

<LiveComponent language="tsx">
{`
  import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-row gap-4 w-full justify-center">
    <Select>
      <SelectTrigger align="left" className="w-full">
        <SelectValue placeholder="Left" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="item-1">Select Item 1</SelectItem>
        <SelectItem value="item-2">Select Item 2</SelectItem>
        <SelectItem value="item-3">Select Item 3</SelectItem>
      </SelectContent>
    </Select>
    <Select>
      <SelectTrigger align="center" className="w-full">
        <SelectValue placeholder="Center" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="item-1">Select Item 1</SelectItem>
        <SelectItem value="item-2">Select Item 2</SelectItem>
        <SelectItem value="item-3">Select Item 3</SelectItem>
      </SelectContent>
    </Select>
    <Select>
      <SelectTrigger align="right" className="w-full">
        <SelectValue placeholder="Right" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="item-1">Select Item 1</SelectItem>
        <SelectItem value="item-2">Select Item 2</SelectItem>
        <SelectItem value="item-3">Select Item 3</SelectItem>
      </SelectContent>
    </Select>
  </div>
`}
</LiveComponent>


